<template>
  <div class="forgot">
    <!--卡片视图-->
    <el-card>
      <!--头部-->
      <template #header>
        <div class="card-header" style="text-align: left">
          <span style="color: red">忘记密码</span>
          <small>FORGOT PASSWORD</small>
        </div>
      </template>
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          size="mini"
        >
          <!--联系方式-->
          <el-form-item prop="mobile" label="手机号">
            <el-input type="mobile" v-model="ruleForm.mobile"> </el-input>
          </el-form-item>
          <!--邮箱-->
          <el-form-item prop="encodedPassword" label="新密码">
            <el-input type="email" v-model="ruleForm.encodedPassword">
            </el-input>
          </el-form-item>
          <!--验证码-->
          <el-form-item prop="captcha" label="验证码">
            <el-input v-model="ruleForm.captcha"></el-input>
            <sidentify :identifyCode="ver"></sidentify>
          </el-form-item>
        </el-form>
      </div>
      <!--尾部-->
      <div class="card-footer">
        <el-divider></el-divider>
        <el-button style="width: 400px" @click="getforget()">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import Sidentify from "../../components/Sidentify.vue";
import { verification } from "@/api/verification";
import { ref } from "@vue/reactivity";
import { ElMessage } from 'element-plus'
import { forget } from "@/api/user.js";
export default {
  setup() {
    let ver = ref("");
    function veri() {
      verification().then((res) => {
        ver.value = res.data.data.captcha;
      });
    }
    veri();
    return {
      ver,
      veri
    };
  },
  components: { Sidentify },
  data() {
    return {
      ruleForm: {
        mobile: "",
        encodedPassword: "",
        captcha: "",
      },
      rules: {
        mobile: [
          { required: true, message: "请输入联系方式", trigger: "change" },
        ],
        captcha: [
          { required: true, message: "请输入验证码", trigger: "change" },
        ],
        encodedPassword: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
    };
  },
  methods:{
    getforget(){
      forget(this.ruleForm).then(res =>{
        this.veri()
        if(res.data.code == 401){
          ElMessage.error(res.data.msg)
          return
        }
        ElMessage.success("找回成功")
        console.log(res);
      })
    }
  }
};
</script>

<style scoped>
.forgot {
  width: 900px;
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 0 auto;
}
/* .form {
  height: 120px;
} */
.card-footer {
  text-align: center;
}
</style>
